import services from '@/services/user';
import { EUser } from '@/services/user/UserController';
import {
  ActionType,
  PageContainer,
  ProDescriptionsItemProps,
  ProTable,
} from '@ant-design/pro-components';
import { Button, Divider, message, Tag } from 'antd';
import React, { useRef, useState } from 'react';
import CreateForm from './components/CreateForm';
import UpdateForm from './components/UpdateForm';
import UpdateTechnicallyForm from './components/UpdateTechnicallyForm';

const { queryPage, editState } = services.UserController;

/**
 * 更新状态
 * @param fields
 */
const handleState = async (fields: EUser, state: number) => {
  const hide = message.loading('正在更新状态');
  try {
    await editState(fields.id, state);
    hide();

    message.success('更新状态成功');
    return true;
  } catch (error) {
    hide();
    message.error('更新状态失败请重试！');
    return false;
  }
};

const UserPage: React.FC<unknown> = () => {
  const [createModalVisible, handleModalVisible] = useState<boolean>(false);
  const [updateModalVisible, handleUpdateModalVisible] = useState<boolean>(false);
  const [updateTechnicallyModalVisible, handleTechnicallyModalVisible] = useState<boolean>(false);
  const actionRef = useRef<ActionType>();
  const [row, setRow] = useState<EUser>();

  const columns: ProDescriptionsItemProps<EUser>[] = [
    {
      title: '会员ID',
      dataIndex: 'userId',
      hideInSearch: true,
    },
    {
      title: '会员',
      dataIndex: 'name',
    },
    {
      title: '手机号码',
      dataIndex: 'phone',
      valueType: 'text',
    },
    {
      title: '状态',
      dataIndex: 'status',
      hideInForm: true,
      valueEnum: {
        1: { text: '正常' },
        2: { text: '禁用' },
      },
      renderText(text, record, index, action) {
        return <Tag color={text === 1 ? 'green' : 'red'}>{text === 1 ? '正常' : '禁用'}</Tag>;
      },
    },
    {
      title: '技术等级',
      dataIndex: 'level',
      valueType: 'text',
    },
    {
      title: '技术分',
      dataIndex: 'technically',
      valueType: 'text',
    },
    {
      title: '注册时间',
      dataIndex: 'createTime',
      valueType: 'text',
    },
    {
      title: '操作',
      dataIndex: 'option',
      valueType: 'option',
      render: (_, record) => (
        <>
          <a
            onClick={() => {
              handleUpdateModalVisible(true);
              setRow(record);
            }}
          >
            编辑
          </a>
          <Divider type="vertical" />
          <a
            onClick={() => {
              handleState(record, 2);
            }}
          >
            禁用
          </a>
          <Divider type="vertical" />
          <a
            onClick={() => {
              handleState(record, 1);
            }}
          >
            启用
          </a>
          <Divider type="vertical" />
          <a
            onClick={() => {
              setRow(record);
              handleTechnicallyModalVisible(true);

            }}
          >
            调整技术分
          </a>
        </>
      ),
    },
  ];

  return (
    <PageContainer
      header={{
        title: '会员管理',
      }}
    >
      <ProTable<EUser>
        actionRef={actionRef}
        rowKey="userId"
        toolBarRender={() => [
          <Button
            key="1"
            type="primary"
            onClick={() => handleModalVisible(true)}
          >
            新建
          </Button>,
        ]}
        request={async (params, sorter, filter) => {
          const { data, success } = await queryPage({
            ...params,
            // @ts-ignore
            sorter,
            filter,
          });
          return {
            data: data?.list || [],
            success,
          };
        }}
        columns={columns}
      />

      <CreateForm
        onCancel={handleModalVisible}
        modalVisible={createModalVisible}
        onReloadAndRest={() => {
          handleModalVisible(false);
          if (actionRef.current) {
            actionRef.current.reload();
          }
        }}
      />
      <UpdateForm
        user={row}
        onCancel={() => {
          handleUpdateModalVisible(false);
        }}
        modalVisible={updateModalVisible}
        onReloadAndRest={() => {
          handleUpdateModalVisible(false);
          if (actionRef.current) {
            actionRef.current.reload();
          }
        }}
      />
      <UpdateTechnicallyForm
        user={row}
        onCancel={() => {
          handleTechnicallyModalVisible(false);
        }}
        modalVisible={updateTechnicallyModalVisible}
        onReloadAndRest={() => {
          handleTechnicallyModalVisible(false);
          if (actionRef.current) {
            actionRef.current.reload();
          }
        }}
      />
    </PageContainer>
  );
};

export default UserPage;
